<template>
  <div class="common-layout">
    <el-row>
      <el-container>
        <el-header style="background-color: #409EFF" >
          <el-button :style="{paddingTop: '10px',float: 'right',marginTop: '10px'}" @click="drawer = true" plain>交接班</el-button>
        </el-header>
        <el-drawer
          title="交接人列表"
          :visible.sync="drawer"
          :direction="direction"
          :before-close="handleClose">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="班次状态" prop="status">
              <el-select
                v-model="queryShiftParams.shiftStatus"
                placeholder="班次状态"
                clearable
                size="small"
                style="width: 240px"
              >
                <el-option
                  v-for="dict in dict.type.shift_status"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="当前人员" prop="shift_people">
              <el-select
                v-model="queryShiftParams.currentPeople"
                placeholder="人员"
                clearable
                size="small"
                style="width: 240px"
              >
                <el-option
                  v-for="dict in dict.type.shift_people"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="交接人" prop="shift_people">
              <el-select
                v-model="queryShiftParams.handoverPerson"
                placeholder="人员"
                clearable
                size="small"
                style="width: 240px"
              >
                <el-option
                  v-for="dict in dict.type.shift_people"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="房费收入">
              <el-input-number disabled v-model="queryShiftParams.shiftMoney" :min="0" :precision="2"></el-input-number>
            </el-form-item>
            <el-form-item label="交接押金">
              <el-input-number v-model="queryShiftParams.oldDeposit" :min="0" :precision="2"></el-input-number>
            </el-form-item>
            <el-form-item label="押金收入">
              <el-input-number disabled v-model="queryShiftParams.shiftDeposit" :min="0" :precision="2"></el-input-number>
            </el-form-item>
            <el-form-item label="消费总记">
              <el-input-number disabled v-model="queryShiftParams.totalConsumptionPrice" :min="0" :precision="2"></el-input-number>
            </el-form-item>
            <el-form-item label="交接备注">
              <el-input v-model="queryShiftParams.shiftRemarks"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit">确定</el-button>
            </el-form-item>
          </el-form>
        </el-drawer>

        <el-container>
          <el-main>
            <el-tabs :tab-position="tabPosition">
              <el-tab-pane @click="" label="二楼">
                <el-col
                  v-for="(o, index) in secondRoomCount"
                  :key="index"
                  :span="5"
                  :offset="1"
                  :style="{paddingTop: '10px'}"
                >
                  <el-card :body-style="{ padding: '0px' }">
                    <img :src="room" class="image" style="width: 382px;height: 300px"/>
                    <div style="padding: 14px">
                      <el-tag>{{'房间：'+ o.roomId}}</el-tag>
                      <el-tag v-if="o.dutyBill.rootStatus != '2'" :style="{marginLeft : '10px'}" type="success">空闲</el-tag>
                      <el-tag v-if="o.dutyBill.rootStatus == '2'" :style="{marginLeft : '10px'}" type="warning">占用</el-tag>
                      <el-tag v-if="(o.dutyBill.totalPrice == null ? 0 : o.dutyBill.totalPrice) <= (o.dutyBill.deposit == null ? 0 : o.dutyBill.deposit)" :style="{marginLeft : '10px'}" type="success">押金正常</el-tag>
                      <el-tag v-if="(o.dutyBill.totalPrice == null ? 0 : o.dutyBill.totalPrice) > (o.dutyBill.deposit == null ? 0 : o.dutyBill.deposit)" :style="{marginLeft : '10px'}" type="danger">押金不足</el-tag>
                      <div class="bottom">
                        <el-tag size="small" type="info" @click="roomDetail(o)">详情</el-tag>
                        <el-tag :style="{marginLeft : '10px', marginTop: '5px'}" size="small" type="info" @click="roomAdd(o)">入住</el-tag>
                        <el-tag :style="{marginLeft : '10px', marginTop: '5px'}" size="small" type="info" @click="roomLeave(o)">退房</el-tag>
                      </div>
                    </div>
                  </el-card>
                </el-col>
              </el-tab-pane>
              <el-tab-pane label="三楼">
                <el-col
                  v-for="(o, index) in thirdRoomCount"
                  :key="index"
                  :span="5"
                  :offset="1"
                  :style="{paddingTop: '10px'}"
                >
                  <el-card :body-style="{ padding: '0px' }">
                    <img :src="room" class="image" style="width: 382px;height: 300px"/>
                    <div style="padding: 14px">
                      <el-tag>{{'房间：'+ o.roomId}}</el-tag>
                      <el-tag v-if="o.dutyBill.rootStatus != '2'" :style="{marginLeft : '10px'}" type="success">空闲</el-tag>
                      <el-tag v-if="o.dutyBill.rootStatus == '2'" :style="{marginLeft : '10px'}" type="warning">占用</el-tag>
                      <el-tag v-if="(o.dutyBill.totalPrice == null ? 0 : o.dutyBill.totalPrice) <= (o.dutyBill.deposit == null ? 0 : o.dutyBill.deposit)" :style="{marginLeft : '10px'}" type="success">押金正常</el-tag>
                      <el-tag v-if="(o.dutyBill.totalPrice == null ? 0 : o.dutyBill.totalPrice) > (o.dutyBill.deposit == null ? 0 : o.dutyBill.deposit)" :style="{marginLeft : '10px'}" type="danger">押金不足</el-tag>
                      <div class="bottom">
                        <el-tag size="small" type="info" @click="roomDetail(o)">详情</el-tag>
                        <el-tag :style="{marginLeft : '10px', marginTop: '5px'}" size="small" type="info" @click="roomAdd(o)">入住</el-tag>
                        <el-tag :style="{marginLeft : '10px', marginTop: '5px'}" size="small" type="info" @click="roomLeave(o)">退房</el-tag>
                      </div>
                    </div>
                  </el-card>
                </el-col>
              </el-tab-pane>
              <el-tab-pane label="四楼">
                <el-col
                  v-for="(o, index) in fourRoomCount"
                  :key="index"
                  :span="5"
                  :offset="1"
                  :style="{paddingTop: '10px'}"
                >
                  <el-card :body-style="{ padding: '0px' }">
                    <img :src="room" class="image" style="width: 382px;height: 300px"/>
                    <div style="padding: 14px">
                      <el-tag>{{'房间：'+ o.roomId}}</el-tag>
                      <el-tag v-if="o.rootStatus != 2" :style="{marginLeft : '10px'}" type="success">空闲</el-tag>
                      <el-tag v-if="o.rootStatus == 2" :style="{marginLeft : '10px'}" type="warning">占用</el-tag>
                      <el-tag v-if="(o.dutyBill.totalPrice == null ? 0 : o.dutyBill.totalPrice) <= (o.dutyBill.deposit == null ? 0 : o.dutyBill.deposit)" :style="{marginLeft : '10px'}" type="success">押金正常</el-tag>
                      <el-tag v-if="(o.dutyBill.totalPrice == null ? 0 : o.dutyBill.totalPrice) > (o.dutyBill.deposit == null ? 0 : o.dutyBill.deposit)" :style="{marginLeft : '10px'}" type="danger">押金不足</el-tag>
                      <div class="bottom">
                        <el-tag size="small" type="info" @click="roomDetail(o)">详情</el-tag>
                        <el-tag :style="{marginLeft : '10px', marginTop: '5px'}" size="small" type="info" @click="roomAdd(o)">入住</el-tag>
                        <el-tag :style="{marginLeft : '10px', marginTop: '5px'}" size="small" type="info" @click="roomLeave(o)">退房</el-tag>
                      </div>
                    </div>
                  </el-card>
                </el-col>
              </el-tab-pane>
            </el-tabs>
          </el-main>
        </el-container>
      </el-container>

      <el-drawer
        :title="modalTitle"
        :visible.sync="roomdrawer"
        :direction="direction"
        :before-close="handleClose">
        <el-card class="box-card" style="width: 98%;margin-left: 1%;height: 50%">
          <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
            <el-form-item prop="billId" label="账单编号">
              <el-input disabled v-model="dynamicValidateForm.billId"></el-input>
            </el-form-item>
            <el-form-item prop="roomId" label="房间ID">
              <el-input disabled v-model="dynamicValidateForm.roomId"></el-input>
            </el-form-item>
            <el-form-item prop="roomName" label="房间名称">
              <el-input disabled v-model="dynamicValidateForm.roomName"></el-input>
            </el-form-item>
            <el-form-item prop="price" label="房费" :rules="[{ required: true, message: '请输入房费', trigger: 'blur' }]">
              <el-input-number :disabled="detailDisabled" v-model="dynamicValidateForm.price" :min="0" :precision="2"></el-input-number>
            </el-form-item>
            <el-form-item label="支付渠道" prop="payWay">
              <el-select
                v-model="dynamicValidateForm.payWay"
                placeholder="支付渠道"
                clearable
                size="small"
                style="width: 240px"
                :disabled="detailDisabled"
                :rules="[{ required: true, message: '请选择支付渠道', trigger: 'blur' }]"
              >
                <el-option
                  v-for="dict in dict.type.pay_way"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item prop="deposit" label="押金" :rules="[{ required: true, message: '请输入押金', trigger: 'blur' }]">
              <el-input-number :disabled="detailDisabled" v-model="dynamicValidateForm.deposit" :min="0" :precision="2"></el-input-number>
            </el-form-item>
            <el-form-item label="押金支付渠道" prop="depositWay">
              <el-select
                v-model="dynamicValidateForm.depositWay"
                placeholder="支付渠道"
                clearable
                size="small"
                style="width: 240px"
                :disabled="detailDisabled"
                :rules="[{ required: true, message: '请选择支付渠道', trigger: 'blur' }]"
              >
                <el-option
                  v-for="dict in dict.type.pay_way"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
              <el-button style="float: right" type="primary" :disabled="detailDisabled" @click="submitForm('dynamicValidateForm')">确定</el-button>
            </el-form-item>
<!--            <el-form-item>
              <el-button type="primary" :disabled="detailDisabled" @click="submitForm('dynamicValidateForm')">确定</el-button>
            </el-form-item>-->
          </el-form>
        </el-card>
        <el-card class="box-card" style="width: 98%;margin-left: 1%;margin-top: 1%">
            <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="100%">
              <el-form-item label="" prop="currentShift" style="float: left;margin-left: 1%">
                <el-input
                  v-model="queryParams.currentShift"
                  placeholder="请输入商品名称/数量/金额"
                  clearable
                  size="small"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
              <el-form-item style="float: right">
                <el-button type="primary" icon="el-icon-search" size="mini" @click="">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="">重置</el-button>
                <el-button :disabled="detailDisabled" type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
              </el-form-item>
            </el-form>
            <el-table
              :data="tableData"
              show-summary
              border
              max-height="310">
              <el-table-column
                prop="consumptionType"
                label="商品名称"
                width="100">
                <template slot-scope="scope">
                  <dict-tag :options="dict.type.product_type" :value="scope.row.consumptionType"/>
                </template>
              </el-table-column>
              <el-table-column
                prop="consumptionNum"
                label="数量">
              </el-table-column>
              <el-table-column
                prop="consumptionPrice"
                label="价格">
              </el-table-column>
              <el-table-column
                fixed="right"
                label="操作"
                width="120"
              >
                <template slot-scope="scope">
                  <el-button type="text" size="small" :disabled="detailDisabled" @click="handleUpdate(scope.row)">编辑</el-button>
                  <el-button type="text" size="small" :disabled="detailDisabled" @click="handleDelete(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
      </el-drawer>
    </el-row>

    <!-- 添加或修改房间消费账单对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="值班账单" prop="billId">
          <el-input disabled="" v-model="form.billId" placeholder="商品归属值班账单ID" />
        </el-form-item>
        <el-form-item label="商品类目" prop="consumptionType">
          <el-select
            v-model="form.consumptionType"
            placeholder="商品类目"
            clearable
            size="small"
            style="width: 240px"
          >
            <el-option
              v-for="dict in dict.type.product_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="商品数量" prop="consumptionNum">
          <el-input-number v-model="form.consumptionNum" :min="0" step-strictly placeholder="请输入商品数量" />
        </el-form-item>
        <el-form-item label="消费金额" prop="consumptionPrice">
          <el-input-number v-model="form.consumptionPrice" :min="0" step-strictly placeholder="请输入消费金额" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitConsumptionForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listCheck, getCheck, delCheck, addCheck, updateCheck } from "@/api/system/check";
import { addShift, currentShif,updateShift } from "@/api/system/shift";
import { listBillAll,addBill,updateBill } from "@/api/system/bill";
import {
  listConsumptionAll,
  listConsumption,
  addConsumption,
  updateConsumption,
  delConsumption, getConsumption
} from "@/api/system/consumption";
import RoomImg from "@/assets/images/roomImg.png";

export default {
  name: "Check",
  dicts: ['shift_status', 'shift_people','pay_way','product_type'],
  data() {
    return {
      open: null,
      tableData: [],
      // 选中数组
      ids: [],
      // 入住/退房表格数据
      checkList: [],
      // 弹出层标题
      title: "",
      //房间图片
      room: RoomImg,
      //TAG属性
      tabPosition: 'left',
      //二楼数量
      secondRoomCount: [],
      //三楼数量
      thirdRoomCount: [],
      //四楼数量
      fourRoomCount: [],
      //房间数量
      roomCount: 8,
      drawer: false,
      roomdrawer: false,
      direction: 'rtl',
      shitfStatus: false,
      //操作标识符
      operateFlag: 1,
      //详情输入框禁用标识
      detailDisabled: false,
      //弹出层标题
      modalTitle: null,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        roomName: null,
        roomPrice: null,
        roomFloor: null
      },
      //值班人员信息参数
      queryShiftParams:{
        //值班信息ID
        currentShift: null,
        //值班人
        currentPeople: null,
        //班次状态
        shiftStatus: null,
        //交接人
        handoverPerson: null,
        //班次房费总收入
        shiftMoney: 0,
        //班次押金总收入
        shiftDeposit: 0,
        //交接班次备注
        shiftRemarks: null,
        //上一班次交接押金
        oldDeposit: null,
        //当前班次房间消费总计
        totalConsumptionPrice:0
      },
      queryConsumptionParams: {
        consumptionId: null,
        consumptionType: null,
        consumptionPrice: null,
        billId: null,
        consumptionNum: null
      },
      queryHotelRoomParams:{
        roomId:null,
        roomName: null,
        roomPrice: null,
        roomFloor: null,
        billStatus: null,
        dutyBill:{
          billId: null,
          dutyPeople: null,
          roomId: null,
          price: null,
          deposit: null,
          payWay: null,
          remarks: null,
          rootStatus: null,
          currentShift: null,
          roomName: null,
          depositWay: null
        }
      },
      // 表单参数
      form: {},
      dynamicValidateForm: {},
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    currentShif(this.queryShiftParams).then(response => {
      if(response.data != null){
        this.queryShiftParams = response.data;
      }
    });
    //初始化房间及账单信息
    this.initRoomBill();
  },
  methods: {
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const consumptionId = row.consumptionId || this.ids;
      getConsumption(consumptionId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改房间消费账单";
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const consumptionIds = row.consumptionId || this.ids;
      const billId = {dutyBill:{billId: row.billId}};
      this.$modal.confirm('是否确认删除房间消费账单编号为"' + consumptionIds + '"的数据项？').then(function() {
        return delConsumption(consumptionIds);
      }).then(() => {
        this.roomConsumption(billId);
        this.initRoomBill();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加房间消费账单";
      this.form.billId = this.dynamicValidateForm.billId;
    },
    reset() {
      this.form = {
        consumptionId: null,
        consumptionType: null,
        consumptionPrice: null,
        billId: null,
        consumptionNum: null
      };
      this.roomConsumption(this.queryConsumptionParams);
    },
    /** 提交按钮 */
    submitConsumptionForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if(this.form.billId == null || this.form.billId == '' || this.form.billId == undefined){
            this.$modal.msgError("当前暂放暂未入住，无法添加商品！")
          }else{
            if (this.form.consumptionId != null) {
              updateConsumption(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.roomConsumption(this.dynamicValidateForm.billId);
                this.initRoomBill();
              });
            } else {
              addConsumption(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.roomConsumption(this.dynamicValidateForm.billId);
                this.initRoomBill();
              });
            }
          }
        }
      });
    },
    /** 校验当前是否有人值班 */
    checkDuty(){
      if(this.queryShiftParams.currentShift == null  || this.queryShiftParams.currentShift == undefined){
        this.$modal.msgWarning("当前无人值班");
        return false;
      }else{
        return true;
      }
    },
    /** 校验当前房间是否有人入住 */
    checkRoomStatus(o){
      if(o.dutyBill.rootStatus == '2'){
        return true;
      }else{
        this.$modal.msgWarning("当前房间暂未入住，无法退房");
        return false;
      }
    },
    /** 获取当前房间消费情况 */
    roomConsumption(obj){
      if(obj.dutyBill != null && obj.dutyBill != undefined){
        this.queryConsumptionParams.billId = obj.dutyBill.billId;
      }
      listConsumptionAll(this.queryConsumptionParams).then(response =>{
        this.tableData = response.data;
      });
    },
    /** 房间详情 */
    roomDetail(obj){
      this.roomdrawer = true;
      this.detailDisabled = true;
      this.dynamicValidateForm = obj.dutyBill;
      this.dynamicValidateForm.roomName = obj.roomName;
      this.modalTitle = '房间详情：'+this.dynamicValidateForm.roomName;
      this.roomConsumption(obj);
    },
    /** 入住 */
    roomAdd(obj){
      if(this.checkDuty()){
        this.operateFlag = 1;
        this.roomdrawer = true;
        this.detailDisabled = false;
        this.dynamicValidateForm = obj.dutyBill;
        this.dynamicValidateForm.roomName = obj.roomName;
        this.modalTitle = '入住信息：'+this.dynamicValidateForm.roomName;
        this.roomConsumption(obj);
      }
    },
    /** 退房 */
    roomLeave(obj){
      if(this.checkDuty()){
        if(this.checkRoomStatus(obj)){
          this.operateFlag = 2;
          this.roomdrawer = true;
          this.detailDisabled = false;
          this.dynamicValidateForm = obj.dutyBill;
          this.dynamicValidateForm.roomName = obj.roomName;
          this.modalTitle = '退房信息：'+this.dynamicValidateForm.roomName;
          this.roomConsumption(obj);
        }
      }
    },
    /** 初始化房间信息 */
    initRoomBill(){
      this.queryHotelRoomParams.billStatus = 1;
      this.queryHotelRoomParams.roomFloor = 2;
      listBillAll(this.queryHotelRoomParams).then(response =>{
        this.secondRoomCount = response.data;
      });
      this.queryHotelRoomParams.roomFloor = 3;
      listBillAll(this.queryHotelRoomParams).then(response =>{
        this.thirdRoomCount = response.data;
      })
      this.queryHotelRoomParams.roomFloor = 4;
      listBillAll(this.queryHotelRoomParams).then(response =>{
        this.fourRoomCount = response.data;
      })
    },
    /** 重置值班信息对象 */
    restQueryShift(){
      this.queryShiftParams = {
        currentShift: null,
        currentPeople: null,
        shiftStatus: null,
        handoverPerson: null,
        shiftMoney: 0,
        shiftDeposit: 0,
        shiftRemarks: null,
        oldDeposit: null
      }
    },
    /** 交接班按钮-关闭右侧弹窗 */
    handleClose(done){
      currentShif(this.queryShiftParams).then(response => {
        if(response.data != null){
          this.queryShiftParams = response.data;
        }
      });
      this.detailDisabled = false;
      done();
    },
    /**  值班人上班-添加上班记录 */
    onSubmit(name, value, prompt) {
      if(this.queryShiftParams.shiftStatus == 1){
        //上班
        addShift(this.queryShiftParams).then(response => {
          this.$modal.msgSuccess("上班成功");
          this.restQueryShift();
          currentShif(this.queryShiftParams).then(response => {
            this.queryShiftParams = response.data;
          });
        });
      }else{
        //交班
        updateShift(this.queryShiftParams).then(response =>{
          this.$modal.msgSuccess("交班成功");
          this.restQueryShift();
          currentShif(this.queryShiftParams).then(response => {
            this.queryShiftParams = response.data;
          });
        });
      }
    },
    /** 交接班人员选择切换 */
    changeShifStatus(){
      this.shitfStatus = this.queryShiftParams.shiftStatus == 2 ? true : false;
    },
    /** 提交按钮 */
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.dynamicValidateForm.billId != null && this.operateFlag != 2) {
            this.dynamicValidateForm.dutyPeople = this.queryShiftParams.currentPeople;
            this.dynamicValidateForm.currentShift = this.queryShiftParams.currentShift;
            updateBill(this.dynamicValidateForm).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.initRoomBill();
            });
          }else if(this.dynamicValidateForm.billId != null && this.operateFlag == 2){
            this.dynamicValidateForm.dutyPeople = this.queryShiftParams.currentPeople;
            this.dynamicValidateForm.currentShift = this.queryShiftParams.currentShift;
            this.dynamicValidateForm.billStatus = 2;
            updateBill(this.dynamicValidateForm).then(response => {
              this.$modal.msgSuccess("退房成功");
              this.initRoomBill();
            });
          }else {
            this.dynamicValidateForm.dutyPeople = this.queryShiftParams.currentPeople;
            this.dynamicValidateForm.currentShift = this.queryShiftParams.currentShift;
            this.dynamicValidateForm.billStatus = "1";
            addBill(this.dynamicValidateForm).then(response => {
              this.$modal.msgSuccess("入住成功");
              this.initRoomBill();
            });
          }
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  }
};
</script>
